<template>
	<view class="content" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
		<p class="text">1.司机操作事项与注意事项</p>
		<view>
			<image  class =".image-parent" mode="widthFix" src="../../../../../static/img/cart2.png"></image>
		</view>
		
		<view class="content">
			<p class="text">2.待办单流程</p>
			<view>
				<image  class =".image-parent" mode="widthFix" src="../../../../../static/img/cart11.png"></image>
			</view>
		</view>
		<view class="content">
			<p class="text">3.可进场流程</p>
			<view>
				<image  class =".image-parent" mode="widthFix" src="../../../../../static/img/cart6.png"></image>
			</view>
		</view>
		<view class="content">
			<p class="text">4.收箱流程</p>
			<view>
				<image  class =".image-parent" mode="widthFix" src="../../../../../static/img/cart9.png"></image>
			</view>
		</view>
	</view>

</template>

<script>
	
	// slide.js
	//获取应用实例
	const app = getApp();
	var startX, endX;
	var moveFlag = true;// 判断执行滑动事件
	
	Page({
	
	  /**
	   * 页面的初始数据
	   */
	  data: {
	    content:"可以试试左右滑动了"
	  },
	  touchStart: function (e) {
	    startX = e.touches[0].pageX; // 获取触摸时的原点
	    moveFlag = true;
	  },
	  // 触摸移动事件
	  touchMove: function (e) {
	    endX = e.touches[0].pageX; // 获取触摸时的原点
	    if (moveFlag) {
	      if (endX - startX > 50) {
	        console.log("move right");
	        this.move2right();
	        moveFlag = false;
	      }
	      if (startX - endX > 50) {
	        console.log("move left");
	        this.move2left();
	        moveFlag = false;
	      }
	    }
	
	  },
	  // 触摸结束事件
	  touchEnd: function (e) {
	    moveFlag = true; // 回复滑动事件
	    
	  },
	
	  move2left() {
	    var that = this;
	    
	    that.setData({
	      content: "move2left"
	    });
	  },
	  move2right() {
	    var that = this;
	    that.setData({
	      content: "move2right"
	    });
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad: function (options) {
	  
	  },
	
	  /**
	   * 用户点击右上角分享
	   */
	  onShareAppMessage: function () {
	  
	  }
	})
</script>

<style>
	.content {
		text-align:center;
	    text-align:left;
		font-weight:bold;
		display: flex;
		flex-direction: column;
		justify-content: space-between;		
		
	}
	
.text{
	margin:10rpx;
    background-color:Tomato;
	margin-left: 50rpx;
	width:640rpx;
	
}
		.image-parent {
		  height: 74rpx; 
		  position: relative;
          margin-left: 50rpx;
		  margin-top: 2rpx;
	}
</style>
